<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div style="padding:20px;">
            <el-table :data="tableData" style="text-align: center;" align="center" border :loading="loading">
              <el-table-column label="序号" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="提出人" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.user_name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属店铺" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.shop_name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="提交时间" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.created_at }}</span>
                </template>
              </el-table-column>
              <el-table-column label="用户反馈标题" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.title }}</span>
                </template>
              </el-table-column>
              <el-table-column label="联系方式" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.mobile }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_read == 0">未读</span>
                  <span v-if="scope.row.is_read == 1">已读</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <div style="text-align: center; color: #409EFF; cursor: pointer;" @click="chakan(scope.row)">查看</div>
                </template>
              </el-table-column>
            </el-table>
            <div class="fenye" style="padding: 20px; text-align: right;">
              <el-pagination background layout="total,prev,pager,next" style="text-align: right; padding: 20px;" prev-text="上一页" next-text="下一页" :current-page="all.page" @current-change="fanye"
                      :page-size="all.page_size" :total="total"></el-pagination>
            </div>
          </div>
          <!-- 查看图片 -->
          <el-dialog title="查看详情" :visible.sync="showimg" width="600px">
            <div style="margin-bottom: 20px;">{{neirong.title}}</div>
            <div v-html="neirong.description"></div>
          </el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/leftnew.vue'
	import foot from '@/components/foot.vue'
  import notice from '@/components/notice.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot,
      "notice": notice
		},
		name: 'mySupplier',
		data(){
			return{
        all: {
          page_size: 20,
          page: 1,
        },
        tableData: "",
        total: "",
        loading: true,
        //搜索店铺名称
        imglink:'',
        showimg:false,
        neirong:""
			}
		},
		beforeDestroy() {

		},
		created() {
		  this.getlist()
		},
		methods:{
      chakan:function(item){
        let obj = {
          id:item.id,
          is_read:1
        }
        axios.post('/api/system/feedback/add',obj)
        	.then(response => {
        		if(response.data.msg.code == 0){
        			this.log = true
              this.getlist()
              setTimeout(()=>{
                this.ing = false
              },100)
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
        	})

        this.neirong = item
        this.showimg = true
      },
      //放大图片
      openimg(url){
        console.log(url)
        this.imglink = url
        this.showimg = true
      },
      fanye:function(page){
        this.all.page = page
        this.getlist()
      },

      //获取全部
      getlist: function() {
        var that = this
        axios.get('/api/system/feedback/list',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.index{

    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }

		.el-pagination {
			text-align: right;
			margin: 20px 0
		}

    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}
	}
</style>
